
import {defineComponent, ref, watch, shallowReactive} from 'vue';
import { getAssetsImages } from '@/utils/utils';

// 声明类型
const PropsType = {
    cdata: {
        type: Object,
        require: true
    },
    ratio: {
        type: Number,
        default: 1
    }
} as const

const path = 'path://M800 0h-576c-17.92 0-32 14.08-32 32v960c0 17.92 14.08 32 32 32h576c17.92 0 32-14.08 32-32V32c0-17.92-14.08-32-32-32z'

// 定义主体
export default defineComponent({
    props: PropsType,
    setup(props, {emit}) {

        const chartRef = ref(null);

        // 配置项
        let option = shallowReactive({
            series: null,
        })

        watch(
            () => [props.cdata, props.ratio],
            (value: any) => {

                let val = value[0];
                let ratio = value[1];

                option = {
                    // backgroundColor: '#050A0D',
                    //你的代码
                    series: [
                        {
                            name: '',
                            type: 'liquidFill',
                            radius: '90%',
                            center: ['50%', '50%'],
                            backgroundStyle: {
                                // color: '#050A0D',
                                color: 'transparent',
                            },
                            shape: path,
                            data: [val, val],
                            amplitude: 5, //水波振幅
                            label: {
                                //标签设置
                                // position: ['50%', '45%'],
                                // formatter: '50%', //显示文本,
                                fontSize: 80 * ratio, //文本字号,
                                color: '#fff',
                            },
                            outline: {
                                borderDistance: 0,  // 边框与内容距离
                                itemStyle: {
                                    borderWidth: 2, // 边框宽度
                                    borderColor: {
                                        type: 'linear',
                                        x: 1,
                                        y: 0,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#007DFF',
                                            },
                                            {
                                                offset: 0.6,
                                                color: 'rgba(45, 67, 114, 0.6)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(45, 67, 114, 1)',
                                            },
                                        ],
                                        globalCoord: false,
                                    },
                                },
                            },
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: 'rgba(31, 222, 225, 1)',
                                        },
                                        {
                                            offset: 0.6,
                                            color: '#007DFF80',
                                        },
                                        {
                                            offset: 0,
                                            color: 'rgba(31, 222, 225, 0.3)',
                                        }
                                    ],
                                    globalCoord: false,
                                },

                                shadowBlur: 1 // 波浪的阴影范围
                            },
                        }]
                }
            },
            {
                immediate: true,
                deep: true
            }
        )

        return () => {
            return <vue-echarts ref={chartRef} autoresize={true} option={option} />
        }
    }
})
